<template>
<div class="ss_div">
  <div class="search_div">
    <div class="qg flex_a flex_c">
      <!-- <img class="back" src="~@/assets/back.png"  alt="" @click="back"> -->
			<div :class="['qg_item',isQg?'active':'']" @click="changeQg(true)">人才机构</div>
			<div :class="['qg_item',isQg?'':'active']" @click="changeQg(false)">个人专家</div>
		</div>
    <div class="flex_a">
      <div class="ss_i">
        <input type="text" placeholder="请输入你想要的内容" v-model="query.keywords">
        <img src="~@/assets/ss.png"  alt="" @click="change">
      </div>
    </div>
    <div class="ss_list">
      <van-dropdown-menu active-color="#ff9933">
        <van-dropdown-item :title="cityItem.city_name||'城市'" ref="item">
          <van-picker show-toolbar title="选择城市" :columns="cityList"  @cancel='noShow' @confirm='changeCity'/>
        </van-dropdown-item>
        <van-dropdown-item :title="chainItem.chain_name||'产业链'" v-model="query.chain_id" :options="chainList" @change='changeChain'/>
      </van-dropdown-menu>
    </div>
  </div>
</div>
</template>
<script>
import {city,myIndustrychain} from '@/api/api'
import {debounce} from '@/utils/utils.js'
import merge from 'webpack-merge'
export default {
  data(){
    return{
      query:{
        keywords:'',
        chain_id:'',
        city_id:''
      },
      isQg:true,
      cityList:[],
      chainList:[],
      cityItem:{city_name:''},
      chainItem:{chain_name:''},
    }
  },
  activated(){
    if(this.cityList.length>0){
      if(this.$route.query.chainItem){
        this.query.keywords = ''
        this.changeChain(JSON.parse(this.$route.query.chainItem).id)
      }
      if(this.$route.query.keywords){
        this.changeChain('')
        this.query.keywords = this.$route.query.keywords
      }
      this.$router.push({
        query:merge({},{})
      })
      return
    }
    if(localStorage.cityList&&this.cityList.length==0){
      this.cityList = JSON.parse(localStorage.cityList)
      this.chainList = JSON.parse(localStorage.chainList)
      if(this.$route.query.chainItem){
        this.query.keywords = ''
        this.changeChain(JSON.parse(this.$route.query.chainItem).id)
      }
      if(this.$route.query.keywords){
        this.changeChain('')
        this.query.keywords = this.$route.query.keywords
      }
      this.$router.push({
        query:merge({},{})
      })
      return
    }

    city({city_id:1}).then(res=>{
      res.data.unshift({city_name:'全国',id:'',children:[{city_name:'不限',city_id:'',children:[{city_name:'不限',id:''}]}]})
      res.data.forEach((item,index)=>{
        if(index==0){
          return
        }
        item.children.unshift({city_name:'不限',city_id:'',children:[{city_name:'不限',id:''}]})
        item.children.forEach(item1=>{
          if(item1.children&&item1.children.length>1)
          item1.children.unshift({city_name:'不限',city_id:''})
        })
      })
      this.cityList = res.data
      this.getColumns(this.cityList)
      localStorage.cityList = JSON.stringify(this.cityList)
    })
    myIndustrychain({id:localStorage.IndexId}).then(res=>{
      res.data.unshift({chain_name:'不限',id:''})
      this.chainList = res.data
      this.chainList.forEach(item=>{
        item.text = item.chain_name
        item.value = item.id
      })
      if(this.$route.query.chainItem){
        this.changeChain(JSON.parse(this.$route.query.chainItem).id)
      }
      localStorage.chainList = JSON.stringify(this.chainList)
    })
    if(this.$route.query.keywords){
      this.query.keywords = this.$route.query.keywords
    }
    this.$router.push({
      query:merge({},{})
    })
  },
  watch:{
    'query.keywords':function(){
      debounce(this.change,500)
    }
  },
  methods:{
    changeQg(type){
				this.isQg=type
        this.$emit('changeType',type)
    },
    back(){
      this.$router.push('home')
    },
    noShow(){
      this.$refs.item.toggle()
    },
    getColumns(list){
      list.forEach(item => {
        item.text = item.city_name
        if(item.children&&item.children.length>0){
          this.getColumns(item.children)
        }
      })
    },
    changeCity(val,data){
      let cityItem = {}
      data.forEach((item,index)=>{
        if(item==0){
          return
        }
        if(index==0){
          cityItem = this.cityList[item]
        }else{
          cityItem = cityItem.children[item]
        }
      })
      this.cityItem = cityItem
      this.query.city_id = this.cityItem.id
      this.noShow()
      this.change()
    },
    changeChain(val){
      this.query.chain_id = val
      this.chainItem = this.chainList.find(item=>item.id==val)
      this.$emit('change',this.query)
    },
    change(){
      this.$emit('change',this.query)
    }
  }
}
</script>
<style lang="scss" scoped>
.qg{
  display: flex;
  position: relative;
  margin-bottom: 4px;
  // background: #fff;
  .qg_item{
    width: 35%;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    border-bottom: 1px solid #f0f0f0;
  }
  .back{
    height: 32px;
    width: 32px;
    position: absolute;
    left: 4px;
  }
  .active{
    color: #f93;
    font-weight: 900;
  }
}
.ss_div{
  width: 100%;
  height: 140px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
.search_div{
  width: 100%;
  height:140px;
  padding: 5px 0;
  background: #f3f3f3;
  .ss_i{
    width: calc(100% - 20px);
    margin-left: 8px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 36px;
    border-radius: 18px;
    input{
      height: 36px;
      width: calc(100% - 40px);
      font-size: 16px;
      border:none;
      padding: 0 10px;
    }
    img{
      width: 28px;
      height: 28px;
    }
  }
}
.ss_list{
  width: 100%;
  height: 45px;
  background: #fff;
  margin-top: 5px;
}
</style>